<template>
    <div class="quite-item" @click="onNotice">
        <div class="big-single" v-if="data.type == 1">
            <notice-image v-for="(img,index) in data.images" :key="index" width="100%" height="3.0rem" fit="cover" radius="0.16rem" :src="img.content"></notice-image>
            <div class="text">
                <p class="title">{{data.title}}</p>
                <div class="bottom">
                    <span class="name">{{data.nickname}}</span>
                    <span class="time">{{data.time}}</span>
                </div>
            </div>
        </div>
        <div class="small-single" v-else-if="data.type == 2">
            <div class="text">
                <p class="title">{{data.title}}</p>
                <div class="bottom">
                    <span class="name">{{data.nickname}}</span>
                    <span class="time">{{data.time}}</span>
                </div>
            </div>
            <div class="img">
                <notice-image v-for="(img,index) in data.images" :key="index" width="100%" height="1.7rem" fit="cover" radius="0.16rem" :src="img.content"></notice-image>
            </div>
        </div>
        <div class="many-single" v-else>
            <div class="imgs">
                <notice-image v-for="(img,index) in data.images" :key="index" width="33%" height="1.7rem" fit="cover" :src="img.content"></notice-image>
            </div>
            <div class="text">
                <p class="title">{{data.title}}</p>
                <div class="bottom">
                    <span class="name">{{data.nickname}}</span>
                    <span class="time">{{data.time}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import NoticeImage from '../../Common/Image/Index'
export default {
    name: "QuiteItem",
    components: {
        NoticeImage
    },
    props: {
        data: {
            type: Object
        }
    },
    data() {
        return {
        }
    },
    methods: {
        onNotice() {
            this.$store.commit('setAnimate','turn-on')
            this.$router.push({
                path: `/notice/${this.data.id}`
            })
        }
    }
}
</script>

<style scoped>
.quite-item>div{
    padding:0.2rem 0;
}
.quite-item .big-single{
    border-bottom:1px solid #F5F5F5;
}
.quite-item .big-single .text{
    margin-top:0.1rem;
}
.quite-item .big-single .text .title{
    font-size:0.3rem;
    font-weight:600;
    color:#333;
}
.quite-item .big-single .text .bottom{
    display: flex;
    justify-content: space-between;
    align-items:center;
    color:#999;
    font-size:0.28rem;
    padding:0.1rem 0 0 0;
}
.quite-item .small-single{
    width:100%;
    display: flex;
    border-bottom:1px solid #F5F5F5;
}
.quite-item .small-single .text{
    position: relative;
    width:65%;
    margin-right:2%;
}
.quite-item .small-single .text .title{
    font-size:0.3rem;
    font-weight:600;
    color:#333;
}
.quite-item .small-single .text .bottom{
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content: space-between;
    color:#999;
    font-size:0.28rem;
    padding:0.1rem 0 0 0;
}
.quite-item .small-single .img{
    width:33%;
    height:1.7rem;
    overflow: hidden;
}
.quite-item .many-single{
    width:100%;
    border-bottom:0.02rem solid #F5F5F5;
}
.quite-item .many-single .imgs{
    display:flex;
    justify-content: space-between;
}
.quite-item .many-single .imgs .image:first-child{
    border-radius:0.16rem 0 0 0.16rem;
    overflow:hidden;
}
.quite-item .many-single .imgs .image:last-child{
    border-radius:0 0.16rem 0.16rem 0;
    overflow: hidden;
}
.quite-item .many-single .text{
    margin-top:0.1rem;
}
.quite-item .many-single .text .title{
    font-size:0.3rem;
    font-weight:600;
    color:#333;
}
.quite-item .many-single .text .bottom{
    display: flex;
    justify-content: space-between;
    align-items:center;
    color:#999;
    font-size:0.28rem;
    padding:0.1rem 0 0 0;
}
</style>